import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

Rectangle {
    width: 300
    height: 400
    color: "#f0f0f0"

    ListView {
        anchors.fill: parent
        anchors.margins: 10
        spacing: 10
        clip: true

        model: ListModel {
            ListElement { type: "image"; source: "qrc:/qt_logo.png";  }
            ListElement { type: "text"; content: "这是一段文本内容"; color: "blue" }
            ListElement { type: "image"; source: "qrc:/qt_logo.png"; }
            ListElement { type: "text"; content: "又是一段文本"; color: "red" }
        }
        
        delegate: DelegateChooser {
            role: "type"    //ListElement中的指定属性
            DelegateChoice {
                roleValue: "image"  //匹配指定属性的值
                delegate: Column {
                    spacing: 5
                    Image { 
                        width: 100
                        height: 100
                        source: model.source
                        fillMode: Image.PreserveAspectFit
                    }
                }
            }

            DelegateChoice {
                roleValue: "text"
                delegate: Rectangle {
                    width: ListView.view.width - 20
                    height: 50
                    color: "white"
                    border {
                        color: model.color
                        width: 1
                    }
                    radius: 5

                    Text { 
                        anchors.centerIn: parent
                        text: model.content
                        font.pixelSize: 16
                        color: model.color
                    }
                }
            }
        }
    }
} 
